const CACHE_KEY = 'input-cache'

const COLOR_PATTERN = new RegExp('#[0-9]{6}')

const vm = new Vue({
    el: 'main',
    data: {
        host: window.location.origin,
        title: '',
        values: [],
        valuesInput: '',
        tagNames: [],
        tagNamesInput: '',
        dataColors: [],
        dataColorsInput: '',
        pieChart: null,
        errMsg: '',
    },
    created: function() {
    },
    mounted: function() {
        let inputCache = localStorage.getItem(CACHE_KEY)
        inputCache = JSON.parse(inputCache)
        if (null !== inputCache) {
            this.title = inputCache.title
            this.valuesInput = inputCache.valuesInput
            this.tagNamesInput = inputCache.tagNamesInput
            this.dataColorsInput = inputCache.dataColorsInput
        }
    },
    watch: {
        title: function(val) {
            if (null === val || undefined === val) {
                return
            }
            this.title = val
            this.refreshCache()
        },
        valuesInput: function (val) {
            if (null === val || undefined === val) {
                return
            }
            this.errMsg = ''
            let values = val.split(' ')
            for (let i = 0; i < values.length; ++i) {
                if (Number.isNaN(values[i])) {
                    this.errMsg = '输入的数据没有使用空格分割或输入非法数值'
                    return
                }
            }
            this.values = values
            this.refreshCache()
        },
        tagNamesInput: function (val) {
            if (null === val || undefined === val) {
                return
            }
            this.errMsg = ''
            let tagNames = val.split(' ')
            if (tagNames.length !== this.values.length) {
                this.errMsg = '输入的标签名称数量与数据对不上，数据个数：' + this.values.length + '，标签个数：' + tagNames.length
                return
            }
            this.tagNames = tagNames
            this.refreshCache()
        },
        dataColorsInput: function (val) {
            if (null === val || undefined === val) {
                return
            }
            this.errMsg = ''
            let dataColors = val.split(' ')
            for (let i = 0; i < dataColors.length; ++i) {
                if (this.isColor(dataColors[i])) {
                    this.errMsg = '输入的颜色没有使用空格分割或输入非法颜色值，正确的颜色值例如 #123456'
                    return
                }
            }
            this.dataColors = dataColors
            this.refreshCache()
        },
    },
    methods: {
        draw: function () {
            this.validate()
            if (this.errMsg.length > 0) {
                alert('请先处理好问题再画图')
                return
            }
            if (this.pieChart !== null) {
                this.pieChart.dispose()
            }
            //准备好用于画图的数据和配置
            let data = []
            for (let i = 0; i < this.values.length; ++i) {
                data.push({
                    value: this.values[i],
                    name: this.tagNames[i],
                    itemStyle: {
                        color: this.dataColors[i],
                    },
                })
            }
            let option = {
                series: [
                    {
                        type: 'pie',
                        data: data,
                        radius: '40%',
                        center: ['40%', '50%'],
                    }
                ],
                title: {
                    text: this.title,
                    left: 'center',
                    top: '10%',
                },
                label: {
                    show: true,
                    formatter: '{b}: {c}',
                },
                legend: {
                    show: true,
                    orient: 'vertical',
                    right: '15%',
                    top: '40%',
                },
            }
            //基于准备好的dom，初始化echarts实例
            this.pieChart = echarts.init(document.getElementById('pie-chart'))
            //使用刚指定的配置项和数据显示图表。
            this.pieChart.setOption(option)
        },
        refreshCache: function () {
            let inputCache = {
                title: this.title,
                valuesInput: this.valuesInput,
                tagNamesInput: this.tagNamesInput,
                dataColorsInput: this.dataColorsInput,
            }
            localStorage.setItem(CACHE_KEY, JSON.stringify(inputCache))
        },
        isColor: function (str) {
            if (str.length !== 7) {
                return false
            }
            return COLOR_PATTERN.test(str)
        },
        validate: function () {
            if (this.errMsg.length > 0) return
            let len = this.values.length
            if (len !== this.tagNames.length) {
                this.errMsg = '数据个数与标签个数不对应'
                return
            }
            if (len !== this.dataColors.length) {
                this.errMsg = '数据个数与颜色个数不对应'
            }
        },
    },
})
